<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="../js/layui/css/layui.css" rel="stylesheet">
        <title>Title</title>
    </head>
    <script src="../js/vue.global.min.js"></script>
    <script src="../js/layui/layui.js"></script>
    <script src="../js/chart.js"></script>
    <body>
        <div class="layui-layout layui-layout-admin layui-bg-gray">
            <div class="layui-card" id="world-info-show">
                <div class="layui-card-header">
                    <span class="layui-font-22">控制台信息</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-padding-2">
                        <div class="layui-row">
                            <div class="layui-col-xs5 layui-col-md5 layui-col-sm5">
                                <div class="layui-inline layui-padding-2">
                                    <i class="layui-icon layui-icon-file"> 存储空间</i>
                                </div>
                                <div class="layui-progress" lay-filter="disk-info" lay-showpercent="true">
                                    <div class="layui-progress-bar layui-bg-orange" lay-percent="0%"></div>
                                </div>
                            </div>
                            <div class="layui-col-xs5 layui-col-md5 layui-col-sm5 layui-col-xs-offset2 layui-col-md-offset2 layui-col-sm-offset2">
                                <div class="layui-inline layui-padding-2">
                                    <i class="layui-icon layui-icon-chart"> CPU温度</i>
                                </div>
                                <div class="layui-progress" lay-filter="cpu-temp" lay-showpercent="true">
                                    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card layui-inline">
                <div class="layui-card-header">
                    <span class="layui-font-22">控制台信息发送</span>
                </div>
                <div class="layui-card-body" id="command-msg-send">
                    <div class="layui-form">
                        <div class="layui-form-item layui-inline layui-padding-1">
                            <input type="text" name="" placeholder="文本框" class="layui-input" id="input_msg">
                        </div>
                        <div class="layui-form-item layui-inline layui-padding-1">
                            <button type="button" class="layui-btn" onclick="ajaxTest()">发送</button>
                        </div>
                        <div class="layui-inline layui-form-item layui-padding-1" v-show="command_send_ok===1">
                            <i class="layui-icon layui-icon-success"></i>
                        </div>
                        <div class="layui-inline layui-form-item layui-padding-1" v-show="command_send_ok===2">
                            <i class="layui-icon layui-icon-error"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card layui-inline" id="world-command-tf">
                <div class="layui-card-header">
                    <span class="layui-font-22">传输命令</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-padding-1 layui-inline">
                            <input type="text" name="" placeholder="文件路径" class="layui-input" id="world-ctf-filepath" ondragover="allowSideDrop(event)" ondrop="SideDrop(event)">
                        </div>
                        <div class="layui-form-item layui-padding-1 layui-inline">
                            <button type="button" class="layui-btn" onclick="">发送</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card" id="world-history-1">
                <div class="layui-card-header">
                    <span class="layui-font-22">执行列表</span>
                </div>
                <div class="layui-card-body">
                    <canvas id="chart_unKnow" width="100%"></canvas>
                </div>
            </div>

            <div class="layui-card" id="world-file-upload">
                <div class="layui-card-header">
                    <span class="layui-font-22">文件上传</span>
               </div>
                <div class="layui-card-body">
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 单图片上传
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;" >
                            <div id="ID-upload-demo-text"></div>
                        </div>
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        const { createApp, ref } = Vue;
        let upload;
        let element;
        let layer;
        let util;
        let $;

        let resT;

        layui.use(['element', 'layer', 'util'], function(){
            upload = layui.upload;
            element = layui.element;
            layer = layui.layer;
            util = layui.util;
            $ = layui.$;

            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: '/upload', // 实际使用时改成您自己的上传接口即可。
                before: function(obj){
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });

                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                },
                done: function(res){
                    // 若上传失败
                    if(res.Code !== "OK"){
                        return layer.msg('上传失败');
                    }
                    resT=res;
                    // 上传成功的一些操作
                    // …
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function(){
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function(n, elem, e){
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if(n == 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        });

        let msg_send_status= ref(0);
        async function ajaxTest() {
            msg_send_status.value=0;
            $.ajaxSettings.async = false;  //设置为同步请求
            $.ajax({
                url: "/api/msg",
                data: JSON.stringify({"msg": $("#input_msg")[0].value ,"Code":"OK"}),
                type: "post",
                success: function (response) {
                    if(response.Code==="OK"){
                        msg_send_status.value=1;
                    }else{
                        msg_send_status.value=2;
                    }
                },
                error: function (xhr, status, error) {
                    msg_send_status.value=2;
                }
            });
            $.ajaxSettings.async = true;
        }

        let command_msg_send=createApp({
            setup() {
                return{
                    command_send_ok:msg_send_status
                }
            }
        }).mount("#command-msg-send");
        let world_info_show=createApp({
            setup() {
                return{

                }
            }
        }).mount("#world-info-show");

        let world_history_1=createApp({
            setup(){
                return{

                }
            }
        }).mount("#world-history-1");
        const ctx = document.getElementById('chart_unKnow');

        ctx.height=ctx.width/4;
        const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份'];  // 设置 X 轴上对应的标签
        const data = {
            labels: labels,
            datasets: [{
                label: '我的第一个折线图',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
                tension: 0.1
            }]
        };
        const config = {
            type: 'line', // 设置图表类型
            data: data,
        };
        const myChart = new Chart(ctx, config);

        setTimeout(function (){
            $.ajaxSettings.async = false;  //设置为同步请求
            $.ajax({
                url: "/api/serverinfo",
                type: "get",
                success: function (response) {
                    element.progress('disk-info',((1-response.diskFree/response.diskSize).toFixed(4)*100+"").slice(0,5)+"%");
                    element.render('progress', 'disk-info')
                    element.progress('cpu-temp',(Math.floor(response.cpuTemp/10)/100)+"%");
                    element.render('progress', 'cpu-temp')
                }
            });
            $.ajaxSettings.async = true;
        },200);

    </script>
    <script>
        function allowSideDrop(e){
            e.preventDefault();
        }
        function SideDrop(e){
            e.preventDefault();
            e.target.value=e.dataTransfer.getData("Text");
        }
    </script>
</html>
